React Native I18n দিয়ে অ্যাপ লোকালাইজেশন

I18n (Internationalization) হল একটি প্রক্রিয়া যার মাধ্যমে আপনার অ্যাপ্লিকেশন বিভিন্ন ভাষায় সমর্থন যোগাতে সক্ষম হয়। এটি একটি অত্যন্ত গুরুত্বপূর্ণ বৈশিষ্ট্য যখন আপনি আন্তর্জাতিক বা বহুভাষী ব্যবহারকারীদের লক্ষ্য করছেন। React Native-এ I18n লোকালাইজেশন সম্পাদন করার জন্য react-i18next বা react-native-localize এর মতো প্যাকেজ ব্যবহৃত হয়।

এই টিউটোরিয়ালে, আমি দেখাবো কিভাবে react-i18next প্যাকেজ ব্যবহার করে React Native অ্যাপ্লিকেশনে ভাষা পরিবর্তন এবং লোকালাইজেশন সেটআপ করা যায়।

React Native-এ I18n এর জন্য react-i18next সেটআপ

react-i18next React এবং React Native অ্যাপ্লিকেশনে I18n ব্যবস্থাপনা এবং ভাষার অনুবাদ সহজ করে তোলে। এটি স্বয়ংক্রিয় ভাষা সনাক্তকরণ, কাস্টম ভাষা ফাইল ইত্যাদি সাপোর্ট করে।

১. প্যাকেজ ইনস্টল করা

প্রথমে আপনাকে react-i18next এবং i18next প্যাকেজগুলি ইনস্টল করতে হবে:

npm install react-i18next i18next react-native-localize

এছাড়া, আপনি i18next-http-backend (যদি অনলাইন থেকে ভাষা ফাইল লোড করতে চান) বা i18next-fs-backend (যদি লোকাল ফাইল ব্যবহার করতে চান) ব্যবহার করতে পারেন।

২. i18next কনফিগারেশন সেটআপ

এবার আপনি i18next কনফিগারেশন তৈরি করবেন এবং তা react-i18next এর মাধ্যমে ব্যবহার করবেন।

1. i18n.js কনফিগারেশন ফাইল তৈরি করা:

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as Localization from 'react-native-localize';

// ভাষা ফাইল গুলি
import en from './locales/en.json';
import bn from './locales/bn.json';

// ভাষার সেটআপ
i18n
  .use(initReactI18next) // react-i18next এর সাথে ইন্টিগ্রেশন
  .init({
    resources: {
      en: {
        translation: en, // ইংরেজি ভাষার ফাইল
      },
      bn: {
        translation: bn, // বাংলা ভাষার ফাইল
      },
    },
    lng: 'en', // ডিফল্ট ভাষা
    fallbackLng: 'en', // যদি নির্দিষ্ট ভাষা না পাওয়া যায়, তাহলে ইংরেজি ব্যবহার হবে
    interpolation: {
      escapeValue: false, // React এর জন্য এটির প্রয়োজন নেই
    },
    react: {
      useSuspense: false, // কিছু বিলম্ব থেকে রেন্ডারিং এড়ানোর জন্য
    },
  });

// স্বয়ংক্রিয়ভাবে ব্যবহারকারীর লোকেশন অনুযায়ী ভাষা সিলেক্ট করা
const setLanguage = () => {
  const bestLang = Localization.findBestAvailableLanguage(['en', 'bn']);
  if (bestLang) {
    i18n.changeLanguage(bestLang.languageTag);
  }
};

setLanguage();

export default i18n;

2. ভাষার JSON ফাইল তৈরি করা:

এবার আমরা ভাষার জন্য JSON ফাইল তৈরি করব, যেখানে প্রতিটি ভাষার জন্য অনুবাদ থাকবে।

en.json (ইংরেজি):

{
  "welcome": "Welcome to the App",
  "greeting": "Hello, {{name}}!"
}

bn.json (বাংলা):

{
  "welcome": "অ্যাপসে স্বাগতম",
  "greeting": "হ্যালো, {{name}}!"
}

৩. React Native কম্পোনেন্টে I18n ব্যবহার করা

এখন আপনি আপনার React Native কম্পোনেন্টে useTranslation হুক ব্যবহার করে ভাষার অনুবাদ দেখতে পারবেন।

import React from 'react';
import { View, Text, Button } from 'react-native';
import { useTranslation } from 'react-i18next';

const MyComponent = () => {
  const { t, i18n } = useTranslation();

  // ভাষা পরিবর্তন ফাংশন
  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang);
  };

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 24 }}>{t('welcome')}</Text>
      <Text style={{ fontSize: 18 }}>{t('greeting', { name: 'Aziz' })}</Text>

      {/* ভাষা পরিবর্তন বাটন */}
      <Button title="Change to Bengali" onPress={() => changeLanguage('bn')} />
      <Button title="Change to English" onPress={() => changeLanguage('en')} />
    </View>
  );
};

export default MyComponent;

৪. App.js ফাইলে I18n ইন্টিগ্রেশন:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text } from 'react-native';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';

const Stack = createStackNavigator();

const HomeScreen = () => {
  return (
    <View>
      <Text>{i18n.t('welcome')}</Text>
    </View>
  );
};

const App = () => {
  return (
    <I18nextProvider i18n={i18n}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </I18nextProvider>
  );
};

export default App;

React Native I18n এর সুবিধা:

1. ভাষার সহজ সিলেকশন: ব্যবহারকারীরা সহজেই তাদের পছন্দের ভাষা নির্বাচন করতে পারেন, এবং অ্যাপ্লিকেশন স্বয়ংক্রিয়ভাবে সেই ভাষায় অনুবাদ প্রদর্শন করবে।
2. স্বয়ংক্রিয় ভাষা সনাক্তকরণ: react-native-localize এর মাধ্যমে আপনার অ্যাপ্লিকেশন ব্যবহারকারীর অবস্থান থেকে সঠিক ভাষা সনাক্ত করতে সক্ষম।
3. ভাষার পরিবর্তন: react-i18next দিয়ে ভাষা পরিবর্তন খুব সহজ এবং এটি রিয়েল-টাইমে UI আপডেট করতে সক্ষম।
4. অনুবাদ ফাইলের পোর্টেবিলিটি: আপনি ভাষার অনুবাদ JSON ফাইলের মাধ্যমে সংরক্ষণ করতে পারবেন, যা অন্য ডেভেলপারদের বা দেশগুলোর জন্য সহজেই এক্সপোর্ট এবং ম্যানেজ করা যায়।
5. স্বাভাবিক এবং স্বচ্ছ UI/UX: ব্যবহারকারীর পছন্দ অনুযায়ী ভাষা সিলেকশন এবং প্রদর্শন টেক্সট স্বাভাবিক এবং স্পষ্ট থাকে।

সারাংশ

React Native-এ I18n এর মাধ্যমে অ্যাপ্লিকেশন লোকালাইজেশন প্রক্রিয়া আরও সহজ হয়। react-i18next প্যাকেজ ব্যবহার করে আপনি বিভিন্ন ভাষার জন্য অনুবাদ, ভাষার সিলেকশন, এবং স্বয়ংক্রিয় ভাষা সনাক্তকরণ সিস্টেম তৈরি করতে পারবেন। এটি অ্যাপ্লিকেশনের আন্তর্জাতিক ব্যবহারকারীদের জন্য উপযোগী এবং ব্যবহারকারী বান্ধব করে তোলে।